<template>
  <el-popover
    v-model="visible"
    width="704"
    trigger="click"
  >
    <el-button slot="reference" type="red" icon="el-icon-search"> 高级查询</el-button>

    <div v-loading="loading" class="wholeSearch" style="width: 100%;max-height: 500px;overflow: auto;">
      <div v-for="(item,index) in wholeSearchColumns" :key="index" style="width: 100%;display: flex;justify-content: center;;align-items: center;margin-bottom: 10px">
        <div style="display: flex;justify-content: center;;align-items: center;flex: 1">

          <div>
            <el-select v-model="item.column" popper-class="popperClass" filterable clearable placeholder="字段" @change="columnChange(item)">
              <el-option-group
                v-for="group in options1"
                :key="group.key"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.canSearch === false"
                />
              </el-option-group>
            </el-select>
          </div>
          <div style="margin-left: 10px;">
            <el-select v-if="item.matchTypeTag === 0" v-model="item.matchType" clearable placeholder="规则" @change="matchTypeChange(item)">
              <el-option
                v-for="item in matchTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-if="item.matchTypeTag === 1" v-model="item.matchType" clearable placeholder="规则" @change="matchTypeChange(item)">
              <el-option
                v-for="item in matchTypes1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-if="item.matchTypeTag === 2" v-model="item.matchType" clearable placeholder="规则" @change="matchTypeChange(item)">
              <el-option
                v-for="item in matchTypes2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-left: 10px;">
            <el-date-picker
              v-if="item.matchTypeTag === 2"
              v-model="item.value"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :disabled="item.dateTag === 1"
            />
            <el-input v-else v-model="item.value" clearable placeholder="值" clearable />
          </div>
        </div>

        <div style="width: 50px">
          <el-button v-if="index!==0" class="deleteClass" type="danger" icon="el-icon-delete" circle @click.stop="deleteLine(index)" />
        </div>
      </div>

    </div>
    <div class="wholeSearchButton">
      <el-divider />
      <el-button size="small" type="red" style="float: right;margin-left: 10px" @click.stop="search">查询</el-button>
      <el-button size="small" style="float: right" @click.stop="clear">清空</el-button>

      <el-button size="small" type="red" style="margin-left: 0px" @click.stop="addLine">增加条件</el-button>
      <el-button size="small" type="red" style="margin-left: 10px" @click.stop="saveModel">保存模版</el-button>
    </div>
  </el-popover>

</template>

<script>
import { saveWholeSearchSetting, getWholeSearchSetting } from '@/api/common/systemSet'
import { mapGetters } from 'vuex'
export default {
  name: 'WholeSearch',
  props: {
    page: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters([
      'userId', 'userName'
    ])
  },
  data() {
    return {
      loading: false,
      visible: false,
      wholeSearchColumns: [
        { column: '', matchType: '', value: '', matchTypeTag: 0, dateTag: 0 }
      ],
      options1: [],
      // matchTypeTag: 0, // 匹配类型标识  0:未选择  1:普通字符串字段  2:时间日期字段
      // dateTag: 0, // 日期快捷搜索标识  0:指定时间  1:时间范围
      matchTypes: [
      ],
      matchTypes1: [ // 普通字符串
        { value: '=', label: '等于' },
        { value: 'like', label: '包含' },
        { value: '>', label: '大于' },
        { value: '<', label: '小于' },
        { value: '>=', label: '大于等于' },
        { value: '<=', label: '小于等于' }
      ],
      matchTypes2: [ // 日期时间
        { value: 'yesterday', label: '昨天' },
        { value: 'today', label: '今天' },
        { value: 'tomorrow', label: '明天' },
        { value: 'lastweek', label: '上周' },
        { value: 'thisweek', label: '本周' },
        { value: 'nextweek', label: '下周' },
        { value: 'lastmonth', label: '上个月' },
        { value: 'thismonth', label: '本月' },
        { value: 'nextmonth', label: '下个月' },
        { value: '=', label: '等于' },
        { value: '<=', label: '小于等于' },
        { value: '>=', label: '大于等于' }
      ]

    }
  },
  watch: {
    visible(val) {
      if (val) {
        // this.getModel()
      }
    }
  },
  mounted() {
    this.initSortFieldData() // 选择框数据源初始化

    this.getModel()// 获取高级查询模版
  },
  methods: {
    // 选择框数据源初始化
    initSortFieldData() {
      const _this = this
      _this.options1 = []
      const cacheArray1 = []
      _this.page.columns.forEach(item => {
        const cacheData = {}
        cacheData.key = item.prop
        cacheData.value = item.prop
        cacheData.label = item.label
        cacheData.canSearch = item.canSearch
        cacheArray1.push(cacheData)
      })
      const cacheData1 = {
        key: 1,
        label: '',
        options: cacheArray1
      }
      _this.options1.push(cacheData1)
      const cacheData2 = {
        key: 2,
        label: '',
        options: [
          {
            key: 'autoCreateTime1',
            value: 'autoCreateTime',
            label: '创建时间',
            show: true
          },
          {
            key: 'lastUpdateTime1',
            value: 'lastUpdateTime',
            label: '更新时间',
            show: true
          }
        ]
      }
      _this.options1.push(cacheData2)
    },
    // 增加行
    addLine() {
      const line = {
        column: '',
        matchType: '',
        value: '',
        matchTypeTag: 0,
        dateTag: 0
      }
      this.wholeSearchColumns.push(line)
    },
    // 清空
    clear() {
      this.wholeSearchColumns = [
        { column: '', matchType: '', value: '', matchTypeTag: 0, dateTag: 0 }
      ]
    },
    // 查询
    search() {
      this.visible = false
      this.page.pageData.wholeSearch = JSON.stringify(this.wholeSearchColumns)
      this.page.pageData.quickSearch = undefined
      this.page.getList()
      // console.log(this.wholeSearchColumns)
    },
    // 删除行
    deleteLine(index) {
      this.wholeSearchColumns.splice(index, 1)
    },
    // 保存查询模版
    saveModel() {
      this.loading = true
      const json = {
        pageId: this.page.pageId,
        bandUserId: this.userId,
        createUserName: this.userName,
        createUser: this.userId,
        lastUpdateUser: this.userId,
        json: JSON.stringify(this.wholeSearchColumns)
      }
      saveWholeSearchSetting(json).then(res => {
        if (res && res.result === 'success') {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 1000
          })
          this.loading = false
        }
      })
    },
    getModel() {
      this.loading = true
      const json = {
        pageId: this.page.pageId,
        bandUserId: this.userId,
        createUserName: this.userName,
        createUser: this.userId
      }
      getWholeSearchSetting(json).then(res => {
        if (res && res.result === 'success') {
          if (res.data != null) {
            this.wholeSearchColumns = JSON.parse(res.data.json)
          }
          this.loading = false
        }
      })
    },
    // 字段选择改变
    columnChange(item) {
      // 把规则和值清空
      item.matchType = ''
      item.value = ''
      // 如果清空了选择框
      if (item.column == null || item.column === '') {
        item.matchTypeTag = 0
      } else {
        // 如果选择的是时间日期字段
        if (item.column.indexOf('Date') > -1 || item.column.indexOf('Time') > -1) {
          item.matchTypeTag = 2
        } else { // 如果选择的是字符串字段
          item.matchTypeTag = 1
        }
      }
    },
    // 规则改变
    matchTypeChange(item) {
      // 把值清空
      item.value = ''
      const arr = ['yesterday', 'today', 'tomorrow', 'lastweek', 'thisweek', 'nextweek', 'lastmonth', 'thismonth', 'nextmonth']
      // 如果选择的值在arr内
      if (arr.indexOf(item.matchType) > -1) {
        item.dateTag = 1 // 禁用日期选择
      } else {
        item.dateTag = 0 // 启用日期选择
      }
    }

  }
}
</script>

<style scoped>
.deleteClass{
  margin-left: 10px;
}
</style>
